<template>
	<view>
		<view class="movie_content">
			<view v-for="(item, index) in movieDatas" :key="index" class="movie">
				<view class="movie_list">
					<view @click="movieDetail(item)">
						<view>
							<image style="width: 120px;height: 150px;" :src="item.movieImgHref"></image>
						</view>
						<view class="movie_name">
							<text>{{ item.movieName }}</text>
						</view>
						<view class="movie_update">
							<text>{{ item.movieIsEnd === 0 ? '已完结' : '更新至' + item.movieNowEpisodes + '集' }}</text>
						</view>
					</view>
					<view class="del_icon" @click="delUserMovie(item)">
						<uni-icons type="close" size="30"></uni-icons>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				movieDatas: [],
				show: false,
				userHistoryId: 0,
				emptyShow: false,
				movieName: ''
			};
		},
		// onLoad() {
		// 	this.queryMovieDatas()
		// },
		onShow() {
			this.queryMovieDatas()
		},
		methods: {
			queryMovieDatas() {
				uni.showLoading({
					title: '查询中,请耐心等待一下!',
					mask: true
				})
				const _that = this
				// 调用后台接口
				_that.$api.get({
					url: '/app/movie/search/searchUserMovie',
					params: {
						pageIndex: 0,
						pageSize: 20
					}
				}).then(res => {
					// console.log('res', res)
					if (res && res.data.code === 200) {
						_that.movieDatas = res.data.pages.records
						if (_that.movieDatas.length <= 0) {
							_that.emptyShow = true
						} else {
							_that.emptyShow = false
						}
					}
					uni.hideLoading()
				}).catch(error => {
					console.log('fail:', error)
					uni.hideLoading()
				})
			},
			movieDetail(data) {
				let params = encodeURIComponent(JSON.stringify(data))
				uni.navigateTo({
					url: '/pages/movies/play-movie?params=' + params
				});
			},
			// 移除历史纪录
			delUserMovie(item) {
				this.userHistoryId = item.userHistoryId
				this.movieName = item.movieName
				const _that = this
				uni.showModal({
					title: '提示',
					content: '确定删除【' + this.movieName + '】吗？',
					success(res) {
						if (res.confirm) {
							_that.confirm();
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			confirm() {
				uni.showLoading({
					title: '移除中,请耐心等待一下!',
					mask: true
				})
				const _that = this
				// 调用后台接口
				_that.$api.post({
					url: '/app/movie/search/removeUserMovie',
					params: {
						userHistoryId: _that.userHistoryId
					}
				}).then(res => {
					// console.log('res', res)
					if (res && res.data.code === 200) {
						this.show = false
						uni.showToast({
							title: '移除成功!',
							icon: 'none',
							duration: 2000
						})
						_that.queryMovieDatas()
					}
					uni.hideLoading()
				}).catch(error => {
					console.log('fail:', error)
					uni.hideLoading()
				})
			},
			cancelModal() {
				this.show = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.movie_content {
		margin-left: 40rpx;
		margin-right: 40rpx;
		margin-top: 20rpx;
	}
	
	.movie_list {
		float: left;
		width: 50%;
	}

	.movie_name {
		display: flex;
		width: 300rpx;
		justify-content: center;
		margin-top: 10rpx;
	}

	.movie_update {
		display: flex;
		width: 300rpx;
		justify-content: center;
		margin-top: 10rpx;
	}
	
	.del_icon {
		display: flex;
		width: 300rpx;
		justify-content: center;
		margin-top: 10rpx;
	}
</style>